<template>
  <el-form-item prop="username" :rules="[{validator:validatePassword,trigger:'change'}]">
    <el-input v-model="username" :placeholder="placeholder" @input="enterInput" minlength="6" maxlength="11"></el-input>
  </el-form-item>
</template>

<script>
import {validate_phone} from "@/utils/validate.js";

export default {
  name: "Username",
  props: {
    placeholder:{type:String,default:"手机号"}
  },
  data() {
    return {
      username: ""
    }
  },
  methods: {
    enterInput() {
      let ruleStatus = validate_phone(this.username);
      let value = ruleStatus ? this.username : "";
      this.$emit("update:value", value);
    },
    validatePassword(rule, value, callback) {
      if(!this.username || this.username == "") {
        return callback(new Error(`手机号不能为空`));
      } else if(!validate_phone(this.username)) {
        return callback(new Error("手机号格式不正确"));
      } else {
        callback();
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>